<!--
  *@Description : 发布日常页面
  *@author 萧红
  *@date 2020-03-21 21:27
  *@LastEditTime 2020-03-21 21:27
  *@LastEdititors
-->
<template>
  <transition name="slide-fade">
    <div class="dongTai" :style="{height: $inerHeight + 100 + 'px'}">
      <div class="operate">
        <div @click="toNewPage('/addrichang')">
          <div class="icon" ref="icon">
            <i class="iconfont icontuwen"></i>
          </div>
          <div class="content">发日常</div>
        </div>
        <div @click="toNewPage('/addPhotograph')">
          <div class="icon" ref="icon">
            <i class="iconfont iconzhaoxiangji1"></i>
          </div>
          <div class="content">发摄影</div>
        </div>
        <div @click="toNewPage('/addvedio')">
          <div class="icon" ref="icon">
            <i class="iconfont iconshipin"></i>
          </div>
          <div class="content">发视频</div>
        </div>
        <div @click="toNewPage('/addArticle')">
          <div class="icon" ref="icon">
            <i class="iconfont iconhuati"></i>
          </div>
          <div class="content">发文章</div>
        </div>
        <div>
          <div class="icon" ref="icon">
            <i class="iconfont iconbaobeiguanli"></i>
          </div>
          <div class="content">发二手</div>
        </div>
      </div>
      <div class="cancel" @click="$router.back()">
        <i class="cubeic-close"></i>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'AddDongTai',
  data () {
    return {
      colors: ['#5ce25c', 'skyblue', 'deeppink', '#d2b790', '#2cd62c']
    }
  },
  mounted () {
    let icons = document.querySelectorAll('.operate .icon')
    for (let index in icons) {
      if (index < 5) {
        icons[index].style.backgroundColor = this.colors[index]
      }
    }
  }
}
</script>

<style scoped lang="stylus">
  @import "../../node_modules/stylus-px2rem"
  .dongTai
  {
    width: 100%;
    position relative
    background-color rgba(195, 51, 131, 0.27)
    .operate
    {
      width: 85%
      position absolute
      display flex
      flex-flow row wrap
      justify-content center
      left:50%;
      transform translateX(-50%);
      bottom 20px
      & > div
      {
        margin 10px 10px
        display flex
        flex-flow column nowrap
        justify-content center
        .icon
        {
          width:25px
          height: 25px
          line-height 25px
          border-radius 50%
          background lightblue
          i
          {
            font-size: 14px
          }
        }
        .content
        {
          color #666
          padding-top 4px
        }
      }
    }
    .cancel
    {
      width: 100%
      height 20px
      position absolute
      bottom: 0
      border-bottom 1px solid #f0f0f0
      i{
        font-size:15px
        color deeppink
        display block
        margin 0px auto
        width: 20px
        height: 20px
        line-height 20px
        border-radius 100%
      }
    }
  }
  .slide-fade-enter-active {
    transition: all 1s ease;
  }
  .slide-fade-enter
  {
    transform: translateY(100px);
    opacity: 0;
  }
  .slide-fade-enter-active {
    transition: all 1s ease;
  }
  .slide-fade-enter
  {
    transform: translateY(100px);
    opacity: 0;
  }
</style>
